<template>
	<view class="popview">
		<view class="popview__close">
			<image @click="close" class="popview__close__img" style="width: 40rpx;height: 40rpx;"
				src="/static/icon/cehuafan.svg" />
		</view>
		<view class="centerTop">
			<view class="centerTop__topview">
				<cl-avatar
					:src="user_info.avatar_url"
					size="140rpx"></cl-avatar>
				<view class="centerTop__topview__info">
					<text class="centerTop__topview__info__nickname">Hi“ {{user_info.nick_name}}</text>
					<view style="display: flex;align-items: center;margin-top: 10rpx;" @click.stop="copy">
						<text class="centerTop__topview__info__account">{{$t('my.index.account')}}：{{user_info.user_no}}</text>
						<u-icon name="file-text" size="15px"></u-icon>
					</view>
				</view>
			</view>
			<view class="centerTop__signature u-line-3">
				{{$t("addressbook.friend_details.signature")}}：<span>{{user_info.sign_remark || $t("my.index.noSignature")}}</span> 
			</view>
		</view>
		<!-- <view class="gamesview">
			<text class="gamesview__title">小游戏</text>
			<view class="gamesview__list">
				<view v-for="(game,index) in games" :key="index" class="gamesview__list__item">
					<u-image :src="game.image" :lazy-load="true" width="80rpx" height="80rpx" radius="10rpx"></u-image>
					<text class="gamesview__list__item__name u-line-1">{{game.name}}</text>
				</view>
			</view>
		</view> -->
		<view class="cellviewGrop">
			<view class="cellview"  @click="goPage('collect')">
				<view class="cellview__left">
					<image class="cellview__left__img" src="/static/icon/shoucang_h.svg" mode=""></image>
					<text class="cellview__left__title">{{$t('my.index.collect')}}</text>
				</view>
				<u-icon name="arrow-right" color="#61626e"></u-icon>
			</view>
			<!-- <view class="cellview"  @click="goPage('friend_black')">
				<view class="cellview__left">
					<image class="cellview__left__img" src="/static/icon/heimingdan_h.svg" mode=""></image>
					<text class="cellview__left__title">{{$t("addressbook.friend_black.title")}}</text>
				</view>
				<u-icon name="arrow-right" color="#61626e"></u-icon>
			</view> -->
			<view class="cellview" @click="goPage('privacy_security')">
				<view class="cellview__left">
					<image class="cellview__left__img" src="/static/icon/yinsianquan_h.svg" mode=""></image>
					<text class="cellview__left__title">{{$t('my.index.privacySecurity')}}</text>
				</view>
				<u-icon name="arrow-right" color="#61626e"></u-icon>
			</view>
		</view>
		<view class="cellviewGrop">
			<view class="cellview" @click="goPage('my_setting_notification')">
				<view class="cellview__left">
					<image class="cellview__left__img" src="/static/icon/xiaoxitongzhi_h.svg" mode=""></image>
					<text class="cellview__left__title">{{$t('my.index.notification')}}</text>
				</view>
				<u-icon name="arrow-right" color="#61626e"></u-icon>
			</view>
			<view class="cellview" @click="goPage('my_setting')">
				<view class="cellview__left">
					<image class="cellview__left__img" src="/static/icon/shezhi_h.svg" mode=""></image>
					<text class="cellview__left__title">{{$t('my.index.setting')}}</text>
				</view>
				<u-icon name="arrow-right" color="#61626e"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				games: [{
						image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng14368afef323b080953c1c5846bc5f1fa0d98bdf053498030e265e032aff9500',
						name: '神庙逃亡',
					},
					{
						image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf6ce97a594e6599211dd7acd1ae1a8be25fc987981b504176c7a03f3cbf77d2c',
						name: '切水果',
					},
					{
						image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng851bfcdaf91bf290026eb63effdbd5d4ce85af6db57cadce509f9ff81f5697e5',
						name: '开心消消乐',
					},
					{
						image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb53277e8de65578c98bf2fee0aa4373094be9bc390aab6d0824c47395eba8daf',
						name: '超级玛丽',
					},
					{
						image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd22a948653511d60f8ee76636ac59ef72b00f203d44af3337903ab8e56f04c1a',
						name: '炸弹人',
					},
					{
						image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3a29c73e28dcf514243b3a9b5e7c77f6a7f4157476395621e576f6cd5207375c',
						name: '魂斗罗',
					},
					{
						image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2dbdd34ee0c21e42065dcf95c76631403d90e35793b7753b3e403c0eee676e0b',
						name: '坦克大战',
					},
					{
						image: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng452c7af9d7469f905fa2054e89d9e21d519cc49b7cbdfe0af63755cfe3699f52',
						name: '洛克人',
					},
				],
			};
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
			})
		},
		onLoad() {

		},
		methods: {
			copy(){
				uni.setClipboardData({
					data: this.user_info.user_no,
					showToast:false,
					success: () => {
						uni.showToast({
							icon:'none',
							title:this.$t("tost.title.copyOk")
						})
					}
				});
			},
			goPage(urlname){
				this.$Router.push({
					name:urlname
				})
			},
			close() {
				this.$emit('close')
			}
		},
	};
</script>

<style scoped lang="scss">
	.popview {
		width: 630rpx;

		&__close {
			margin: 28rpx 0;
			display: flex;
			justify-content: flex-end;

			&__img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 40rpx;
			}
		}

		.centerTop {
			padding: 30rpx;
			box-sizing: border-box;

			&__topview {
				display: flex;
				align-items: center;

				&__info {
					display: flex;
					flex-direction: column;
					margin-left: 30rpx;

					&__nickname {
						font-size: 32rpx;
					}

					&__account {
						font-size: 24rpx;
						color: #61626E;
					}
				}
			}

			&__signature {
				margin-top: 40rpx;
				font-size: 28rpx;
				color: #61626E;
			}
		}

		.gamesview {
			background-color: #ffffff;
			margin: 0 30rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			&__title {
				font-size: 28rpx;
				color: #61626e;
			}

			&__list {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 30rpx;
				&__item{
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 110rpx;
					&__name{
						font-size: 24rpx;
						margin-top: 15rpx;
					}
				}
			}
		}
		.cellviewGrop {
			background: #ffffff;
			border-radius: 20rpx;
			margin: 20rpx 30rpx 0;
		
			.cellview {
				display: flex;
				justify-content: space-between;
				padding: 0 35rpx;
				height: 110rpx;
		
				&__left {
					display: flex;
					align-items: center;
		
					&__img {
						width: 40rpx;
						height: 40rpx;
					}
		
					&__title {
						font-size: 28rpx;
						margin-left: 20rpx;
						color: #61626e;
					}
				}
			}
		}
	}
</style>